<template>
  <div class="head">
    <div class="head-title">
      <div class="title-left">
        <div class="pattern">
          <div class="pattern-piece">
            <div class="piece"></div>
            <div class="piece"></div>
            <div class="piece"></div>
            <div class="piece"></div>
          </div>
        </div>
        <div class="title">
          表面处理生产线可视化数字中心
        </div>
        <div class="decoration">
          <div class="line1"></div>
          <div class="line2"></div>
        </div>
      </div>
      <div class="title-middle">
        <!-- <div class="line1"></div> -->
      </div>
      <div class="title-right">
        <div class="date">
          <div class="date-day">{{ time.year + '.' + time.month  + '.' +  time.day }}</div>
          <div class="date-time">{{ time.hour + ':' + time.minute }}</div>
        </div>
        <div class="weather">天气</div>
        <div class="temperature">温度</div>
        <div class="humidity">湿度</div>
      </div>
    </div>
    <!-- <div class="head-menu" v-if="false">
      <div class="menu-item" v-for="(item, index) in menuList" :key="index">
        <div class="item-title">{{ item.label }}</div>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Tsrv } from '@/services';
import { Tcmd } from './command';
import { timerSets, menuLimit } from './config';

@Component  
export default class Head extends Vue {

  private timer: any = null;

  private time: any = {
    year: '',
    month: '',
    day: '',
    hour: '',
    minute: '',
    second: ''
  };

  private menuList: Array<any> = [];

  private formatTime(date: Date) {
    // const time = this.time
    // time.year = date.getFullYear();
    // time.month = date.getMonth() + 1;
    // time.day = date.getDate();
    // time.hour = date.getHours();
    // time.minute = date.getMinutes();
    // time.second = date.getSeconds();

    const time = this.time
    time.year = date.getFullYear();
    const month = date.getMonth() + 1;
    if  (month < 10) {
      time.month = '0' + month;
    } else {
      time.month = month;
    }
    const day = date.getDate();
    if  (day < 10) {
      time.day = '0' + day;
    } else {
      time.day = day;
    }
    const hour = date.getHours();
    if  (hour < 10) {
      time.hour = '0' + hour;
    } else {
      time.hour = hour;
    }
    const minute = date.getDate();
    if  (minute < 10) {
      time.minute = '0' + minute;
    } else {
      time.minute = minute;
    }
    const second = date.getSeconds();
    if (second < 10) {
      time.second = '0' + second;
    } else {
      time.second = second;
    }
  }

  created() {
    this.init()
  }

  mounted() {
    this.loadMenuList();
  }

  private loadMenuList() {
    Tcmd.getNavData().then(res=> {
      const [b, resp, data, msg] = res;
      if (b) {
        this.menuList = [];
        const list  = data['navs'];
        for  (let i = 0; i < list.length; i++) {
          const el = list[i];
          if (menuLimit.has(el['title'])) {
            el['label'] = menuLimit.get(el['title'])
            this.menuList.push(list[i]);
          } 
        }
      }
    }).catch(err=> {
      this.$Message.error(err);
    });
  }

  private init() {
    this.timer = setInterval(() => {
      this.formatTime(new Date());
    }, 1000);
  }

  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>

<style lang="scss" scoped>
.head {
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  flex-direction: column;
  
  .head-title {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 4fr 3fr;
    align-items: center;
    
    .title-left {
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      
      .pattern {
        width: 83px;
        height: 118px;
        background: linear-gradient(114deg, rgba(24,235,252,0.49) 0%, rgba(27,233,250,0) 100%);
        margin-right: 20px;
        
        .pattern-piece {
          width: 23px;
          height: 23px;
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          gap: 2px;
          
          .piece {
            width: 9px;
            height: 9px;
            background: #FFFFFF;
            opacity: 0.24;
            border-radius: 1px;
          }
        }
      }
      
      .title {
        font-family: Alibaba-PuHuiTi, sans-serif;
        font-size: 28px;
        font-weight: bold;
        color: #fff;
        text-shadow: 0 2px 8px rgba(0,0,0,0.3);
        background: linear-gradient(90deg, #FFFFFF 0%, #A8B0B8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding: 0 20px;
      }
      
      .decoration {
        position: absolute;
        bottom: 30%;
        left: 120px;
        display: flex;
        align-items: center;
        
        .line1 {
          width: 200px;
          height: 1px;
          background: linear-gradient(90deg, rgba(159,166,176,0.8) 0%, rgba(159,166,176,0) 100%);
        }
        
        .line2 {
          width: 15px;
          height: 15px;
          border: 1px solid rgba(159,166,176,0.8);
          transform: rotate(45deg);
          margin-left: 10px;
        }
      }
    }
    
    .title-middle {
      .line1 {
        width: 100%;
        height: 1px;
        background: rgba(151,151,151,0.3);
      }
    }
    
    .title-right {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
      
      > div {
        flex: 1;
        height: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: rgba(255,255,255,0.9);
        font-size: 14px;
        
        &:not(:first-child) {
          border-left: 1px solid rgba(134,142,160,0.5);
        }
      }
      
      .date {
        .date-day {
          font-size: 12px;
          margin-bottom: 4px;
        }
        
        .date-time {
          font-size: 18px;
          font-weight: bold;
          letter-spacing: 1px;
        }
      }
      
      .weather, .temperature, .humidity {
        font-size: 14px;
        opacity: 0.9;
      }
    }
  }
  
  .head-menu {
    // 保持原有样式或根据需要进行调整
  }
}
</style>

